<template>
	<view @touchmove.stop.prevent="">
		<view class="top">
			<view class="title">
				<navigator url="../mine/mine">
					<image class="title-user" src="../../static/found/circle/girl.png" mode=""></image>
				</navigator>
				<text class="title-hotel">社区</text>
				<image class="title-msg" src="../../static/found/circle/msglist.png" mode=""></image>
				<image class="title-add" src="../../static/found/circle/add.png" mode=""></image>
			</view>
			<view>
				<input placeholder="搜索相关内容" class="search" type="text" value="" />
			</view>
		</view>
		<view class="main">
			<view class="fenlei">
				<view class="normal" :class="current==focus?commend:normal"><text @click="vary" id="focus">关注</text>
				</view>
				<view class="normal" :class="current==commend?commend:normal"><text @click="vary" id="commend">推荐</text>
				</view>
				<view class="normal" :class="current==around?commend:normal"><text @click="vary" id="around">圈子</text>
				</view>
				<view class="normal" :class="current==video?commend:normal"><text @click="vary" id="video">视频</text>
				</view>
				<view class="normal" :class="current==live?commend:normal"><text @click="vary" id="live">直播</text>
				</view>
			</view>
			<scroll-view class="scroll" scroll-x="true">
				<view class="scroll-1">
					<view class="open">
						<image class="open-img" src="../../static/found/circle/dollar.png" mode=""></image>
						<text class="open-txt">开工见面礼</text>
					</view>
					<view class="niu">
						<text>牛年开工大吉领红包</text>
					</view>
					<view class="show">
						<text>晒实盘</text>
						<text>红包再翻倍</text>
					</view>
					<button class="join" type="default">立即参与</button>
				</view>
				<view class="scroll-2">
					<view class="open">
						<image class="open-img" src="../../static/found/circle/dollar.png" mode=""></image>
						<text class="open-txt">牛年买基金</text>
					</view>
					<view class="niu">
						<text>有奖征文</text>
					</view>
					<view class="show">
						<text>分享你最看好的基金</text>
					</view>
					<button class="join" type="default">立即参与</button>
				</view>
			</scroll-view>
			<view v-if="current==commend" class="">
				<view class="block-item">
					<view class="item-tile">
						<view class="userinfo">
							<image class="userinfo-img" src="../../static/found/circle/brid.png" mode=""></image>
							<text class="username">迪迦奥特曼</text>
							<view class="userage">财龄1年</view>
							<text class="usertime">04-10 16:46:33</text>
						</view>
						<view class="focus" v-if="type" @click="type=!type">
							<button class="focus-btn" type="default">关注</button>
						</view>
						<view class="focus" v-else @click="type=!type">
							<button class="delfocus-btn">取消关注</button>
						</view>
					</view>
					<view class="usercontent">
						<text>春节后基金连续下跌2日,还好有稳固收益呀!</text>
					</view>
					<view class="usertip">
						<navigator url="">#卖盘秀#</navigator>
						<navigator url="">#投资心得#</navigator>
						<navigator url="">#牛年买牛基#</navigator>
					</view>
					<view class="usershow">
						<image class="showimg" src="../../static/found/circle/pagetwo.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pageeight.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pagefour.png" mode=""></image>
					</view>
					<navigator class="jump" url="">
						<image class="jump-img" src="../../static/found/circle/up.png" mode=""></image>
						<text class="jump-txt">招商中证白酒指数(LLLLLLLLLLL)</text>
						<text class="jump-num">+21.18%</text>
					</navigator>
					<view class="bottom">
						<view class="bottom-l">
							<image class="share" src="../../static/found/circle/share.png" mode=""></image>
							<button open-type="share" class="share-txt">分享</button>
						</view>
						<view class="bottom-2">
							<image class="speak" src="../../static/found/circle/message.png" mode=""></image>
							<text class="speak-txt" @click="toggleMask('show')">8560</text>
							<ygc-comment ref="ygcComment"
							        :placeholder="'发布评论'" 
							        @pubComment="pubComment"></ygc-comment>
						</view>
						<view class="bottom-3">
							<view class="likeit" @click="likes()">
								<image class="zan" src="../../static/found/circle/like.png" mode=""></image>
							</view>
							<text :class="liked?'likes':'zantxt'" >{{like_count}}</text>
						</view>
					</view>
				</view>
				<view class="block-item">
					<view class="item-tile">
						<view class="userinfo">
							<image class="userinfo-img" src="../../static/found/circle/brid.png" mode=""></image>
							<text class="username">迪迦奥特曼</text>
							<view class="userage">财龄1年</view>
							<text class="usertime">04-10 16:46:33</text>
						</view>
						<view class="focus" v-if="type1" @click="type1=!type1">
							<button class="focus-btn" type="default">关注</button>
						</view>
						<view class="focus" v-else @click="type1=!type1">
							<button class="delfocus-btn">取消关注</button>
						</view>
					</view>
					<view class="usercontent">
						<text>春节后基金连续下跌2日,还好有稳固收益呀!</text>
					</view>
					<view class="usertip">
						<navigator url="">#卖盘秀#</navigator>
						<navigator url="">#投资心得#</navigator>
						<navigator url="">#牛年买牛基#</navigator>
					</view>
					<view class="usershow">
						<image class="showimg" src="../../static/found/circle/pagetwo.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pageeight.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pagefour.png" mode=""></image>
					</view>
					<navigator class="jump" url="">
						<image class="jump-img" src="../../static/found/circle/up.png" mode=""></image>
						<text class="jump-txt">招商中证白酒指数(LLLLLLLLLLL)</text>
						<text class="jump-num">+21.18%</text>
					</navigator>
					<view class="bottom">
						<view class="bottom-l">
							<image class="share" src="../../static/found/circle/share.png" mode=""></image>
							<button open-type="share" class="share-txt">分享</button>
						</view>
						<view class="bottom-2">
							<image class="speak" src="../../static/found/circle/message.png" mode=""></image>
							<text class="speak-txt" @click="toggleMask('show')">8560</text>
							<ygc-comment ref="ygcComment"
							        :placeholder="'发布评论'" 
							        @pubComment="pubComment"></ygc-comment>
						</view>
						<view class="bottom-3">
							<view class="likeit" @click="likes()">
								<image class="zan" src="../../static/found/circle/like.png" mode=""></image>
							</view>
							<text :class="liked?'likes':'zantxt'" >{{like_count}}</text>
						</view>
					</view>
				</view>
				<view class="friends-title">
					<view class="icon"></view>
					<text class="help">帮你found更有趣的人</text>
				</view>
				<view class="friends">
					<view class="friends-item">
						<image class="head" src="../../static/found/circle/baby.png" mode=""></image>

						<view class="name">倪哥</view>
						<view class="intro">非知名财经分析</view>

						<button class="observe" type="default">+关注</button>
					</view>
					<view class="friends-item">
						<image class="head" src="../../static/found/circle/eye.png" mode=""></image>

						<view class="name">赛文奥特曼</view>
						<view class="intro">推荐给你专业的TA</view>

						<button class="observe" type="default">+关注</button>
					</view>
					<view class="friends-item">
						<image class="head" src="../../static/found/circle/no.png" mode=""></image>

						<view class="name">迪迦奥特曼</view>
						<view class="intro">文案策划</view>

						<button class="observe" type="default">+关注</button>
					</view>
				</view>
				<view class="block-item">
					<view class="item-tile">
						<view class="userinfo">
							<image class="userinfo-img" src="../../static/found/circle/brid.png" mode=""></image>
							<text class="username">迪迦奥特曼</text>
							<view class="userage">财龄1年</view>
							<text class="usertime">04-10 16:46:33</text>
						</view>
						<view class="focus" v-if="type2" @click="type2=!type2">
							<button class="focus-btn" type="default">关注</button>
						</view>
						<view class="focus" v-else @click="type2=!type2">
							<button class="delfocus-btn">取消关注</button>
						</view>
					</view>
					<view class="usercontent">
						<text>春节后基金连续下跌2日,还好有稳固收益呀!</text>
					</view>
					<view class="usertip">
						<navigator url="">#卖盘秀#</navigator>
						<navigator url="">#投资心得#</navigator>
						<navigator url="">#牛年买牛基#</navigator>
					</view>
					<view class="usershow">
						<image class="showimg" src="../../static/found/circle/pagetwo.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pageeight.png" mode=""></image>
						<image class="showimg" src="../../static/found/circle/pagefour.png" mode=""></image>
					</view>
					<navigator class="jump" url="">
						<image class="jump-img" src="../../static/found/circle/up.png" mode=""></image>
						<text class="jump-txt">招商中证白酒指数(LLLLLLLLLLL)</text>
						<text class="jump-num">+21.18%</text>
					</navigator>
					<view class="bottom">
						<view class="bottom-l">
							<image class="share" src="../../static/found/circle/share.png" mode=""></image>
							<button open-type="share" class="share-txt">分享</button>
						</view>
						<view class="bottom-2">
							<image class="speak" src="../../static/found/circle/message.png" mode=""></image>
							<text class="speak-txt" @click="toggleMask('show')">8560</text>
							<ygc-comment ref="ygcComment"
							        :placeholder="'发布评论'" 
							        @pubComment="pubComment"></ygc-comment>
						</view>
						<view class="bottom-3">
							<view class="likeit" @click="likes()">
								<image class="zan" src="../../static/found/circle/like.png" mode=""></image>
							</view> 
							<text :class="liked?'likes':'zantxt'" >{{like_count}}</text>
						</view>
					</view>
				</view>
				<view class="down">
					加载更多...
				</view>
				<view class="push">
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		components: {ygcComment},
		computed: {
			focus() {
				return "focus"
			},
			commend() {
				return "commend"
			},
			around() {
				return "around"
			},
			video() {
				return "video"
			},
			live() {
				return "live"
			},
		},
		data() {
			return {
				"current": "commend",
				"type":true,
				"type1":true,
				"type2":true,
				"like_count":999,
				"liked":false
			}
		},
		methods: {
			vary(event) {
				this.current = event.target.id
			},
			toggleMask(val){
				this.$refs.ygcComment.toggleMask(val)
			},
			likes(){
				console.log(1);
				this.liked=!this.liked
				if(this.liked){
					this.like_count++
				}else{
					this.like_count--
				}
			}
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 240rpx;
		background-color: #3476F1;
	}

	.title {
		width: 712rpx;
		height: 76rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.title-user {
		width: 76rpx;
		height: 76rpx;
	}

	.title-msg {
		width: 54rpx;
		height: 44rpx;
		margin-left: 192rpx;
	}

	.title-add {
		width: 48rpx;
		height: 44rpx;
		margin-left: 26rpx;
	}

	.title-hotel {
		margin-left: 240rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.search {
		width: 712rpx;
		height: 60rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 24rpx;
		border-radius: 50rpx;
		background-image: url(../../static/found/circle/roadone.png);
		background-repeat: no-repeat;
		padding-left: 250rpx;
		padding-top: rpx;
		box-sizing: border-box;
		background-position: 200rpx;
	}

	.main {
		width: 100%;
		height: 3300rpx;
		background-color: #FFFFFF;
		border-radius: 50rpx;
		position: relative;
		top: -34rpx;
		overflow: hidden;
	}

	.fenlei {
		width: 580rpx;
		height: 54rpx;
		display: flex;
		margin-left: 52rpx;
		margin-top: 30rpx;
	}

	.normal {
		width: 120rpx;
		height: 54rpx;
		text-align: center;
		background-color: #FFFFFF;
		line-height: 54rpx;
		color: #AEAEAE;
	}

	.commend {
		width: 120rpx;
		height: 54rpx;
		text-align: center;
		background-color: #3476F1;
		color: #FFFFFF;
		line-height: 54rpx;
		border-radius: 20rpx;
	}

	.scroll {
		margin-left: 24rpx;
		margin-top: 40rpx;
		width: 724rpx;
		height: 252rpx;
		background-color: #FFFFFF;
		white-space: nowrap;

	}

	.scroll-1 {
		width: 484rpx;
		height: 248rpx;
		background-image: url(../../static/found/circle/backmoney.png);
		background-repeat: no-repeat;
		background-size: cover;
		display: inline-block;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.scroll-2 {
		width: 484rpx;
		height: 248rpx;
		margin-left: 20rpx;
		background-image: url(../../static/found/circle/pen.png);
		background-repeat: no-repeat;
		background-size: cover;
		display: inline-block;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.open {
		display: block;
		margin-left: 24rpx;
	}

	.open-img {
		width: 20rpx;
		height: 20rpx;
	}

	.open-txt {
		font-size: 20rpx;
		color: #c99648;
	}

	.niu {
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 24rpx;
		margin-top: 26rpx;
	}

	.show {
		font-size: 22rpx;
		color: #AEAEAE;
		margin-left: 24rpx;
		margin-top: 16rpx;
	}

	.join {
		width: 168rpx;
		height: 52rpx;
		color: #FFFFFF;
		line-height: 52rpx;
		border-radius: 20rpx;
		background-color: #be7f22;
		font-size: 26rpx;
		margin: 0rpx;
		margin-left: 24rpx;
		margin-top: 20rpx;
	}

	.block-item {
		width: 708rpx;
		height: 740rpx;
		border: 1rpx solid #CCCCCC;
		margin: 40rpx auto;
		border-radius: 20rpx;
	}

	.item-tile {
		width: 662rpx;
		height: 80rpx;
		display: flex;
		margin: 32rpx auto;
		justify-content: space-between;
	}

	.userinfo {
		width: 326rpx;
		height: 80rpx;

	}

	.userinfo-img {
		width: 72rpx;
		height: 72rpx;
		float: left;
	}

	.username {
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.userage {
		display: inline-block;
		width: 84rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 20rpx;
		background-color: #fcf5ec;
		color: #c68e3c;
	}

	.usertime {
		display: block;
		font-size: 20rpx;
		color: #AEAEAE;
		margin-left: 100rpx;
	}

	.focus-btn {
		width: 112rpx;
		height: 48rpx;
		color: #417ff1;
		line-height: 48rpx;
		font-size: 24rpx;
		padding: 0rpx;
		margin-top: 20rpx;
		padding-right: 20rpx;
		background-image: url(../../static/found/circle/lifocus.png);
		background-repeat: no-repeat;
		background-position: 75rpx 10rpx;
	}
	.delfocus-btn{
		width: 112rpx;
		height: 48rpx;
		background-color: #CCCCCC;
		color: blue;
		line-height: 48rpx;
		font-size: 24rpx;
		padding: 0rpx;
		margin-top: 20rpx;
	}

	.usercontent {
		margin-left: 24rpx;
		font-size: 36rpx;

	}

	.usertip {
		font-size: 24rpx;
		display: flex;
		color: #9abbf8;
		margin-left: 24rpx;
		margin-top: 10rpx;
	}

	.usershow {
		width: 660rpx;
		height: 280rpx;
		display: flex;
		margin: 20rpx auto;
		justify-content: space-around;
	}

	.showimg {
		width: 206rpx;
		height: 276rpx;
	}

	.jump {
		width: 410rpx;
		height: 50rpx;
		background-color: #eaf1fe;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		margin-left: 24rpx;
	}

	.jump-img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}

	.jump-txt {
		margin-left: 20rpx;
		font-size: 24rpx;
		width: 240rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.jump-num {
		font-size: 20rpx;
		color: #F85656;
	}

	.bottom {
		width: 654rpx;
		height: 60rpx;
		display: flex;
		margin: 20rpx auto;
		align-items: center;
	}

	.bottom-l {
		width: 248rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.bottom-2 {
		width: 248rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-left: 1rpx solid #CCCCCC;
		border-right: 1rpx solid #CCCCCC;
		text-align: center;
	}

	.bottom-3 {
		width: 248rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.share {
		width: 20rpx;
		height: 20rpx;
		vertical-align: middle;
	}

	.share-txt {
		font-size: 20rpx;
		color: #CCCCCC;
		margin-left: 20rpx;
		display: inline-block;
		vertical-align: middle;
		background-color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		border: none;
	}

	.speak {
		width: 20rpx;
		height: 20rpx;
		vertical-align: middle;
	}

	.speak-txt {
		font-size: 20rpx;
		color: #CCCCCC;
		margin-left: 20rpx;
		display: inline-block;
		background-color: #FFFFFF;
		vertical-align: middle;
	}

	.zan {
		width: 20rpx;
		height: 20rpx;
	}

	.zantxt {
		font-size: 20rpx;
		color: #CCCCCC;
		margin-left: 20rpx;
		display: inline-block;
	}

	.friends-title {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}

	.icon {
		width: 10rpx;
		height: 32rpx;
		background-color: #3476F1;
	}

	.help {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.friends {
		width: 704rpx;
		height: 320rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.friends-item {
		width: 220rpx;
		height: 320rpx;
		border: 1rpx solid #CCCCCC;
	}

	.head {
		width: 110rpx;
		height: 110rpx;
		margin-left: 60rpx;
		margin-top: 24rpx;
		display: block;
	}

	.name {
		font-size: 28rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		margin: 0 auto;
		display: block;
	}

	.intro {
		font-size: 26rpx;
		height: 60rpx;
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		line-height: 40rpx;
		color: #AEAEAE;
		display: block;
		margin: 0 auto;
	}

	.observe {
		width: 140rpx;
		height: 52rpx;
		margin-top: 40rpx;
		color: #FFFFFF;
		background-color: #3476F1;
		font-size: 26rpx;
		line-height: 52rpx;
		margin: 0 auto;
	}

	.down {
		width: 100%;
		margin-top: 20rpx;
		height: 100rpx;
		text-align: center;
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.push {
		width: 94rpx;
		height: 94rpx;
		background-image: url(../../static/found/circle/adds.png);
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		top: 950rpx;
		left: 650rpx;
	}
	.likes{
		font-size: 20rpx;
		color: red;
		margin-left: 20rpx;
		display: inline-block;
	}
	.likeit{
		display: inline-block;
	}
</style>
